<template>
  <div class="product-list">
    <div class="content">
      <!-- 表格内容 -->
      <div class="list-table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column prop="name" label="商品名称" fixed />
          <el-table-column label="商品主图">
            <template slot-scope="scope">
              <div
                style="width: 60px; height: 60px"
                @click="showItem(fileBaseUrl + scope.row.image)"
              >
                <img
                  style="width: 100%; height: 100%"
                  :src="fileBaseUrl + scope.row.image"
                  alt="暂无图片"
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="classifyName" label="分类" />
          <el-table-column prop="price" label="价格(元)" />
          <el-table-column prop="ranknum" label="商品排序" />
          <el-table-column
            prop="description"
            min-width="120"
            label="商品描述"
          />
          <el-table-column prop="soldCount" label="总销量" />
          <el-table-column label="商品状态">
            <template slot-scope="scope">
              <span
                :class="
                  scope.row.status === 1
                    ? 'app-text-color-success'
                    : 'app-text-color-warning'
                "
              >{{ statusOptions[scope.row.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sellgift" label="赠送商品" />
          <el-table-column prop="updateTime" label="更新时间" min-width="120" />
          <el-table-column label="操作" min-width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-if="
                  !$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_EDIT')
                "
                type="text"
                size="mini"
                @click="goBusinessGoodsEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                v-if="
                  !$store.getters.banBtnList.includes(
                    'BTN_WCANYIN_GOODS_STATUS_MANAGE'
                  )
                "
                type="text"
                size="mini"
                @click="
                  changeStatus(
                    scope.$index,
                    scope.row,
                    scope.row.status === 1 ? 3 : 1
                  )
                "
              >{{ scope.row.status === 1 ? "售罄" : "在售" }}</el-button>
              <el-button
                v-if="
                  !$store.getters.banBtnList.includes(
                    'BTN_WCANYIN_GOODS_DELETE'
                  )
                "
                type="text"
                size="mini"
                @click="changeStatus(scope.$index, scope.row, 2)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total !== 0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>
    <el-dialog :visible.sync="showItemimg">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!--彈框 -->
    <DialogEditGoods ref="editGoods" />
  </div>
</template>

<script>
import DialogEditGoods from './components/DialogEditGoods'
import { mapGetters } from 'vuex'
import {
  getGoodsList,
  updateGoodsStatus,
  getClassifyList
} from '@/views/wcyModule/api/product'
export default {
  components: {
    DialogEditGoods
  },
  props: ['formPar'],
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  data() {
    return {
      dialogImageUrl: '',
      showItemimg: false,
      // 配置
      classifyOptions: [],
      statusOptions: {
        0: '已下架',
        1: '出售中',
        // 2: "已删除",
        3: '已售罄'
      },
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      searchSelect: 'name', // 搜索的类型
      // 状态
      tableLoading: false, // 表格loading
      searchLoading: false, // 表格loading
      filterCollapseActive: false, // 筛选是否打开
      // 数据
      list: [] // 表格数据
    }
  },
  methods: {
    /**
     * 获取数据
     *
     */
    searchData() {
      this.$nextTick(() => {
        this.initData(1, 10)
      })
    },
    // 获取数据
    initData(
      pageNum = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      const { shopId, name, classifyId, status, filterCollapseActive } =
        this.formPar
      const params = { pageNum, pageSize, shopId, name, classifyId, status }
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      // 判断筛选是否展开
      if (!filterCollapseActive) {
        delete params['classifyId']
        delete params['status']
      }
      this.tableLoading = true
      getGoodsList(params)
        .then((res) => {
          this.list = res.data.row
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.tableLoading = false
          this.searchLoading = false
        })
    },
    showItem(url) {
      this.dialogImageUrl = url
      this.showItemimg = !this.showItemimg
    },

    // 分页sizes改变
    sizesChange(pageSize) {
      this.initData()
    },

    // 分页page改变
    pageChange(page) {
      this.initData()
    },

    // 点击新增
    openProductAdd() {
      this.$refs.editGoods.open('add', this.shopId).then((res) => {
        this.initData()
      })
    },

    //  更新商品状态 在售 售罄  删除
    changeStatus(index, row, status) {
      const statusName = ['下架', '在售', '删除', '售罄']
      let str = ''
      if (status === 2) {
        str = `此操作将永久删除${row.name}, 是否继续?`
      } else {
        str = `此操作将使${row.name}改为${statusName[status]}状态, 是否继续?`
      }
      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      })
        .then(() => {
          const data = {
            id: row.id,
            shopId: this.formPar.shopId,
            status: status
          }
          this.tableLoading = true
          updateGoodsStatus(data)
            .then((res) => {
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: status === 2 ? '删除成功' : '更新状态成功',
                  type: 'success',
                  duration: 2000,
                  offset: 40
                })
                this.initData()
              }
            })
            .catch((err) => {
              this.tableLoading = false
            })
        })
        .catch((err) => {})
    },

    // 编辑
    goBusinessGoodsEdit(index, row) {
      const _this = this
      this.$refs.editGoods
        .open('edit', row.id, this.formPar.shopId)
        .then((res) => {
          _this.initData()
        })
    },

    // 筛选
    submitForm(formName) {
      this.initData(1)
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    /**
     * 状态组
     */
    // 筛选
    filterCollapseChange(val) {
      if (val.length === 0) {
        this.filterCollapseActive = false
      } else {
        this.filterCollapseActive = true
      }
    },
    // 搜索
    searchData() {
      this.$nextTick(() => {
        this.initData(1, 10)
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.product-list {
  .el-input {
    width: 300px;
    margin-right: 10px;
  }
  // 单选换行
  .el-radio + .el-radio {
    margin-left: 0;
  }
  .el-radio {
    margin-right: 10px;
    line-height: 32px;
  }
  .el-select {
    width: 300px;
  }

  /* 表格 */
  .content {
    margin-top: 10px;
  }
}
</style>
